<template>
	<view class="playerhome-page">
		<u-navbar title="" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>

		<u-swiper height="732rpx" radius="0" bgColor="#CEE9FC" :indicator="true" circular indicatorMode="dot"
			:indicatorStyle="{'right':'100rpx','bottom':'50rpx'}" indicatorInactiveColor="rgba(255, 255, 255, 0.5)"
			indicatorActiveColor="rgba(255, 255, 255, 1)" :list="swiperList" @click="clickBanner" :autoplay="false"
			duration="1000" interval="5000">
		</u-swiper>

		<view class="rounded-top-lg bg-white p-2 position-relative " style="margin-top: -20px;">
			<view class="flex align-center">
				<text class="fs-32 text-black font-weight-light">{{detail.nickname}}</text>
				<image v-if="detail.is_verified === 1" src="/static/imgs/renzheng.png" mode="aspectFill" class="w-32 h-32 ml-1">
				</image>
				<image v-if="detail.nationality && detail.nationality.logo" :src="detail.nationality.logo" mode="aspectFill"
					class="w-32 h-32 ml-1 rounded-circle flex-shrink"></image>
				<view class="flex align-center bgFF4CBE rounded-circle px-1 ml-1">
					<image :src="`/static/imgs/${detail.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
						style="width: 20rpx;height: 20rpx;"></image>
					<text class="text-white fs-20">{{detail.age}}</text>
				</view>
				<image src="/static/imgs/vip.png" mode="aspectFill" class="w-78 h-43 ml-1"></image>
				<view class="flex align-center flex-1 justify-end">
					<view class="flex align-center ftFF0073">
						<text class="fs-34 font-weight-light">{{detail.price}}</text>
						<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 mx-1"></image>
					</view>
					<text class="fs-24 text-black letter-spacing ml-1">/ {{$t('hhh.t7')}}</text>
				</view>
			</view>

			<view class="flex align-center fs-24 ft666666 my-2">
				<text>{{detail.online_time}} {{$t('hhh.t54')}}</text>
			</view>

			<view class="flex align-center justify-between fs-24 ft666666 my-2">
				<view class="flex align-center">
					<text class="mr-1">{{$t('hhh.t55')}}</text>
					<u-rate :count="count" v-model="value" active-color="#FFCC2C" size="40"></u-rate>
					<text class="ftFEC100 fs-24 font-weight-bold ml-1">3.0</text>
				</view>

				<view class="flex align-center flex-1 justify-end">
					<image src="/static/imgs/hot_icon.png" mode="aspectFill" class="w-36 h-36"></image>
					<text class="ftFF685E fs-26 font-weight-light">{{abbreviateNumber(detail.fire_balance)}}</text>
				</view>
			</view>

			<view class="text-black fs-28">{{detail.introduce}}</view>

			<view class="flex flex-wrap align-center justify-between my-3">
				<view class="interestsItem flex align-center p-3 box-sizing rounded-circle w-50 mb-2"
					v-for="(item,index) in detail.interests" :key="index"
					:style="{'background-image':`url(${item.detail_bg_image})`}">
					<image :src="item.icon" mode="aspectFill" class="w-64 h-64"></image>
					<view class="flex flex-column ml-2">
						<text class="fs-24 text-black">{{item.name}}</text>
						<text class="ft999999 fs-20">{{item.avg_score}} mark</text>
					</view>
				</view>
				<!-- <view class="voice flex align-center p-3 box-sizing">
					<image src="/static/imgs/voice2.png" mode="aspectFill" class="w-64 h-64"></image>
					<view class="flex flex-column ml-2">
						<text class="fs-24 text-black">Voice Call</text>
						<text class="ft999999 fs-20">4.7 mark</text>
					</view>
				</view> -->
			</view>

			<view class="fs-36 text-black font-weight-light">{{$t('hhh.t56')}}</view>
			<image v-for="(item,index) in detail.game_images" :key="index" :src="item" mode="widthFix"
				class="w-100 flex-shrink mt-2 mb-3">
			</image>

			<view class="fs-36 text-black font-weight-light">{{$t('hhh.t57')}}</view>
			<view class="bglg3 rounded-max-lg flex align-center p-3 mt-2" @tap="navTo('/pages/support/support')">
				<view class="flex align-center">
					<image v-for="item in 5" :key="item" src="/static/imgs/player1.jpg" :class="item > 1?'ml--1':''"
						mode="aspectFill" class="w-32 h-32 rounded-circle border bdcolor1 position-relative">
					</image>
				</view>
				<text class="fs-22 ft666666 ml-1 flex-1">{{$t('hhh.t58')}}</text>
				<text class="ft666666 fs-24">{{$t('hhh.t59')}}</text>
				<image src="/static/imgs/right_icon.png" mode="aspectFill" class="w-28 h-28"></image>
			</view>

			<u-gap height="80" bgColor="transparent"></u-gap>

			<view class="flex align-center position-fixed left-0 right-0 bottom-0 bg-white py-2 px-3">
				<image class="mr-2 flex-shrink" src="/static/imgs/hotadd.png" mode="widthFix" style="width: 98rpx;"
					@tap="navTo('/pages/hotRecharge/hotRecharge')">
				</image>
				<view class="flex align-center justify-center donebtn mx-auto text-white fs-28 font-weight-bold flex-1"
					@tap="navTo(`/pages/checkout/checkout?id=${detail.id}`)">
					{{$t('hhh.t60')}}
				</view>
			</view>
			<u-gap height="100" bgColor="transparent"></u-gap>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		abbreviateNumber,
		getLastFifteenDays,
		getDayHours
	} from '@/utils/common.js'
	import HttpApi from '@/api/httpApi';
	export default {
		data() {
			return {
				swiperList: [],
				count: 5,
				value: 3,
				detail: {},
				id: null,
			}
		},
		computed: {
			...mapGetters(['getbottom'])
		},
		onLoad(query) {
			if (!query.id) {
				uni.$tools.toast(this.$t('hhh.t70'))
				return
			}
			this.id = query.id
			this.playerdetail()
		},
		methods: {
			abbreviateNumber,
			playerdetail() {
				HttpApi.playerdetail({
					id: this.id
				}).then(res => {
					if (res.code === 1) {
						this.detail = res.data
						this.swiperList = this.detail.more_images
					}
				})
			},
			navTo(url) {
				this.skuShow = false
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.playerhome-page {
		.game {
			width: 328rpx;
			height: 108rpx;
			background-image: url('/static/imgs/gamebg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
		}

		.voice {
			width: 328rpx;
			height: 108rpx;
			background-image: url('/static/imgs/voicebg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
		}

		.interestsItem {
			width: 328rpx;
			height: 108rpx;
			// background-image: url('/static/imgs/gamebg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: center;
		}

		.ml--1 {
			margin-left: -10rpx;
		}
	}
</style>